<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div :style="{fontSize:size+'px'}">
      <btn-primary title="这是父组件传递的值"  @change2="changeSize"></btn-primary>
    </div>
    
    <div>
      <btn-primary :title="msg" :change='changeSize'></btn-primary>
         </div>
        </div>
    <!-- <div id="app2">
        <btn-primary></btn-primary>
    </div> -->
    <script>
        /*
        组件名称不推荐出现大写字母-小写
        Vue.component定义的是全局组件 Vue实例都可以使用
        data必须是一个函数，返回值必须是一个对象
        */
       /*子组件调用父组件
       1.prop的方式，:属性, 将函数直接传递到子组件 @click=''change
       2.$emit的方式 @change='change',将函数名子传递到子组件,@click='$emit("changeSize")'
       */
        Vue.component("btn-primary", {
            data(){
                return {
               count: 0,
               //title:""
                }
           // count : 0
            },
            props:["title","color","change"],//同名变量
            methods:{
                click(){
                    this.count++;
                }
            },
            template:"<div><button @click='change'>{{count}}--{{title}}</button> <a href='' @click.prevent='$emit(\"change2\")'>666</a></div>"
     
        })
        let vm =new Vue({
            el:"#app",
            data:{
           msg:"这是父组件msg",
           size:18
            },
            methods:{
                changeSize(){
                    this.size +=4;
                }
            }
            // components:{

            // }
        })
        // let vm2 =new Vue({
        //   el:"#app2"
        // })
    </script>
</body>
</html>